<template>
  <div>
    <nu-dialog
      :title="dialogTitle"
      :visible.sync="isShowDialogShow"
      width="36%"
      center
      :close-on-click-modal="false"
      top="5vh"
      :modal-append-to-body="false"
      :before-close="diaClose"
    >
      <span class="annotation">月可用率=月可投入AGC时间/月有效时间</span><br />
      <span class="annotation">月有效时间=月日历时间-非电厂原因不可抗时间</span>
      <div class="dialogTimeBox">
        <div
          class="el-picker-panel el-date-picker el-popper"
          style="transform-origin: center top; z-index: 2005"
          x-placement="bottom-start"
        >
          <div class="el-picker-panel__body-wrapper">
            <!---->
            <div class="el-picker-panel__body">
              <!---->
              <div
                class="el-date-picker__header el-date-picker__header--bordered"
              >
                <button
                  type="button"
                  aria-label="前一年"
                  class="
                    el-picker-panel__icon-btn
                    el-date-picker__prev-btn
                    el-icon-d-arrow-left
                  "
                  @click="getYear('last')"
                ></button
                ><span role="button" class="el-date-picker__header-label"
                  >{{ dialog.year }} 年</span
                ><button
                  type="button"
                  aria-label="后一年"
                  class="
                    el-picker-panel__icon-btn
                    el-date-picker__next-btn
                    el-icon-d-arrow-right
                  "
                  @click="getYear('next')"
                ></button>
              </div>
              <div class="el-picker-panel__content">
                <table class="el-month-table" style="">
                  <tbody>
                    <tr v-for="(row, key) in rows" :key="key">
                      <td
                        v-for="(cell, key1) in row"
                        :key="key1"
                        @click="handleCellClick(cell.label)"
                      >
                        <div>
                          <a
                            class="cell"
                            :class="cell.label == current ? 'current' : ''"
                            >{{ cell.label }}</a
                          >
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div x-arrow="" class="popper__arrow" style="left: 35px"></div>
        </div>
        <div class="rightBox">
          <span>非电厂原因不可抗时间</span>
          <div class="inputDay">
            <el-input
              v-model="dialog.day"
              type="number"
              style="width: 30%; padding: 0"
              v-show="!isOpen"
              @blur="handleSwitch"
              oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
            ></el-input>
            <span v-show="isOpen" @click="handleSwitch">{{ dialog.day }}</span>
            天<i class="el-icon-edit-outline" @click="handleSwitch"></i>
          </div>
        </div>
      </div>
      <div class="dialogHeaderSearch">
        <nu-button class="dialogSearchButton" type="primary" @click="diaClose"
          >取消</nu-button
        >
        <nu-button class="dialogSearchButton" type="primary" @click="diaSave"
          >确定</nu-button
        >
      </div>
    </nu-dialog>
  </div>
</template>
<script>
import nuDialog from "@/components/base/dialog";
import nuButton from "@/components/base/button";
import { getDateTime } from "@/utils/ruoyi";
export default {
  name: "dialogConfig",
  components: {
    nuDialog,
    nuButton,
  },
  props: {
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialog: {
        year: getDateTime("year"),
        month: "",
        day: "0",
      },
      date: {},
      // isShow:this.dialogShow,
      rows: [
        [
          { label: "一月", value: "01" },
          { label: "二月", value: "02" },
          { label: "三月", value: "03" },
          { label: "四月", value: "04" },
        ],
        [
          { label: "五月", value: "05" },
          { label: "六月", value: "06" },
          { label: "七月", value: "07" },
          { label: "八月", value: "08" },
        ],
        [
          { label: "九月", value: "09" },
          { label: "十月", value: "10" },
          { label: "十一月", value: "11" },
          { label: "十二月", value: "12" },
        ],
      ],
      current: "",
      isOpen: true,
      isShowDialogShow:false
    };
  },
  watch: {
    dialogShow: function (val) {
      this.isShowDialogShow = val
    },
  },
  mounted() {
    this.handleMonth();
  },
  methods: {
    /**
     * 弹窗-保存
     */
    diaSave() {
      console.log(this.dialog);
      //   this.$refs["dialogFormData"].submitForm("form");
    },
    /**
     * 弹窗-关闭
     */
    diaClose() {
      this.$emit("diaClose");
      // this.resetForm('dialog')
    },
    /**
     * 年份切换
     */
    getYear(val) {
      if (val == "last") {
        this.dialog.year--;
      } else {
        this.dialog.year++;
      }
    },
    /**
     * 获取当前月份
     */
    handleMonth() {
      let a = getDateTime("month").slice(-2);
      this.rows.map((item) => {
        item.map((item2) => {
          if (a == item2.value) {
            this.handleCellClick(item2.label);
          }
        });
      });
    },
    handleCellClick(cell) {
      this.dialog.month = cell;
      this.current = cell;
    },
    handleSwitch() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>
<style scoped>
.dialogTimeBox {
  display: flex;
  justify-content: center;
}
.annotation {
  padding: 0 20px;
}
.inputDay {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-picker-panel {
  box-shadow: none;
  border: 1px solid rgba(220, 223, 230, 1);
  border-radius: 10px 0 0 10px;
  /* border-radius: initial; */
}
.el-popper[x-placement^=bottom] .popper__arrow{
  display: none;
}
.current {
  color: #409eff !important;
}
.rightBox {
  width: 25%;
  padding-top: 50px;
  background: #ffffff;
  line-height: 30px;
  margin: 12px 0 5px 0;
  color: #606266;
  text-align: center;
  border: 1px solid rgba(220, 223, 230, 1);
  border-radius: 0 10px 10px 0;
  border-left: none;
}
.dialogHeaderSearch {
  text-align: center;
  padding: 10px;
}
::v-deep .el-input__inner {
  padding: 0 5px;
}
</style>